import { PageHeaderWrapper } from '@ant-design/pro-layout';

import { addDeviceInfo, updateDeviceInfo } from '@/services/device/deviceInfo';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import { Descriptions, Form, message } from 'antd';
import React, { useRef, useState } from 'react';
import { useLocation, useParams } from 'umi';

import { getLicenseByPage } from '@/services/sales/license';
import { PlusOutlined } from '@ant-design/icons';
import ProTable from '@ant-design/pro-table';
import { Button } from 'antd';
const licenseDetailEng: React.FC<{}> = (prop) => {
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [deleteVisit, setDeleteVisit] = useState(false); // 删除提示框
  const [showRole, SetShowRole] = useState(false); //显示角色
  const [formTitle, setFormTitle] = useState('新建设备'); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [rowData, setRowData] = useState({ id: '' }); // 保存行值
  const actionRef = useRef<ActionType>();
  const [form] = Form.useForm();
  const params = useParams();
  const location = useLocation();
  console.log(params, '---ceshi---');
  console.log(location, '---ceshi1---');
  /**
   * 穿梭框的数据设置
   */
  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
    },
    {
      title: '唯一编号', //表头显示的名称
      dataIndex: 'identification', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
    },

    {
      title: '授权号类型', //表头显示的名称
      search: false,
      dataIndex: 'licenseType', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
    },

    {
      title: '授权号', //表头显示的名称
      search: false,
      dataIndex: 'licenseID', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
    },

    {
      title: '订货号', //表头显示的名称
      search: false,
      dataIndex: 'orderId', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
    },
    {
      title: '备注', //表头显示的名称
      search: false,
      dataIndex: 'memo', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
    },

    {
      title: '授权号数量', //表头显示的名称
      search: false,
      dataIndex: 'num', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
    },
    {
      title: '已用数量', //表头显示的名称
      search: false,
      dataIndex: 'usedNum', // 列数据在数据项中对应的路径，支持通过数组查询嵌套路径
    },
    {
      title: '创建人', //表头显示的名称
      search: false,
      dataIndex: 'createName',
    },

    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      render: (text, record, _, action) => [
        <a
          key="route"
          onClick={() => {
            // actionRef.current.reload();
          }}
        >
          转让
        </a>,
      ],
    },
  ];

  const handleSubmit = async () => {
    if (formTitle == '新建设备') {
      await addDeviceInfo(form.getFieldsValue());
    } else {
      await updateDeviceInfo(form.getFieldsValue());
    }

    message.success('添加成功');
    setModalVisit(false);
    // 这个爆红不用管(从新加载页面)
    actionRef.current.reload();
  };
  return (
    <PageHeaderWrapper title={location.query.orderId} breadcrumb={undefined}>
      <Descriptions title="User Info">
        <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>
        <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>
        <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>
        <Descriptions.Item label="Remark">empty</Descriptions.Item>
        <Descriptions.Item label="Address">
          No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China
        </Descriptions.Item>
      </Descriptions>

      <ProTable //表格Pro组件
        headerTitle="客户查询" //表头
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        toolBarRender={(action, { selectedRows }) => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              // console.log(selectedRows, '---选取多行----');
              // 1.清空form
              setCreateOrUpdate(false);
              setFormTitle('新建授权号');
              form.resetFields();
              //
              setModalVisit(true);
            }}
            type="primary"
          >
            新建授权号
          </Button>,
        ]}
        request={async (params = {}, sort, filter) => {
          console.log(params, sort, filter);
          const result = await getLicenseByPage({ ...params, orderId: location.query.orderId });
          return {
            data: result.data.content,
            total: result.data.totalElements,
            success: result.success,
          };
          // return  await new Promise({data:[{loginName:}], total:10, success: 0})
          // return {data:[], total:10, success: 0}
        }} //请求数据的地方，例子是用mock模拟数据，我是在后台请求的数据
        columns={columns} //上面定义的
        rowSelection={{}}
      />
    </PageHeaderWrapper>
  );
};

export default licenseDetailEng;
